<script setup>
defineOptions({
  name: "Welcome"
});
import { ref } from "vue";
import { useECharts } from "@pureadmin/utils";
import { getTotalAgent, getCorrelationAgentSum,  getCumulativeDataCorrelationAgent } from "@/api/home";
const chartRef = ref();
const { setOptions } = useECharts(chartRef);
const totalAmount = ref({})
const noticeAgentSum = ref({})
const activeIndex = ref(1)
const loading = ref(false)
const option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['推广金额','新增客户']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage:false
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['-', '-', '-', '-', '-', '-', '-']
  },
  yAxis: {
    type: 'value',
    position: 'right'
  },
  series: [
    {
      name: '推广金额',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '新增客户',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    }
  ]
};
setOptions({
  ...option
})
getTotalAgent().then((res) => {
  totalAmount.value = res.data
})
getCorrelationAgentSum().then(res =>{
  noticeAgentSum.value = res.data
})
getCharsData()
function getCharsData(type = 1) {
  loading.value = true
  getCumulativeDataCorrelationAgent({type}).then(res => {
    const {allTimes, sons} = res.data
    option.xAxis.data = allTimes
    sons.forEach((item, index) => {
      if (option.series[index])
        option.series[index].data = item.data
    })
    console.log(option)
    setOptions({
      ...option
    })
    console.log(res)
  }).finally(()=> {
    loading.value = false
  })
}
</script>

<template>
  <div class="overview clearfix">
    <div class="main">
      <div class="wrapper">
        <div class="account-wrapper">
          <div class="title">推广账户</div>
          <div class="item-wrapper">
            <div class="total item">
              <div class="label">推广余额（总）</div>
              <div class="value font-number-bold">¥{{ totalAmount.totalAmount }}</div>
            </div>
            <div class="item">
              <div class="label">未入账金额
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="您已赚取的推广金额，但系统尚未生成账单，默认每周三会为您生成。"
                    placement="top"
                  >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              </div>
              <div class="value font-number-medium">¥{{ totalAmount.frozenAmount }}</div>
            </div>
            <img
              src="../../assets/index/arrow-right.png"
              class="arrow-icon"
              alt=""
            />
            <div class="item">
              <div class="label">待对账金额
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="已生成对账单，但还未进行确认。"
                    placement="top"
                  >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              </div>
              <div class="value font-number-medium">¥{{ totalAmount.cumulativeWithdrawAmount }}</div>
            </div>
            <img
              src="../../assets/index/arrow-right.png"
              class="arrow-icon"
              alt=""
            />
            <div class="item">
              <div class="label">可提现金额
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="对账单已确认，但还未到提现时间，默认每周五上午10点自动为您提现。"
                    placement="top"
                  >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              </div>
              <div class="value font-number-medium">¥{{ totalAmount.actualAmount }}</div>
            </div>
            <img
              src="../../assets/index/arrow-right.png"
              class="arrow-icon"
              alt=""
            />
            <div class="item">
              <div class="label">提现中金额
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="正在对您提现的金额进行处理。"
                    placement="top"
                  >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              </div>
              <div class="value font-number-medium">¥{{ totalAmount.cumulativeCommissionAmount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="index">
          <div class="main-wrapper">
            <div class="title-wrapper">
              <span class="title">数据看板</span>
              <div class="time">
                <div data-time="1" @click="getCharsData(1), activeIndex = 1" class="type" :class="activeIndex === 1 && 'type-select'">日</div>
                <div data-time="2" @click="getCharsData(2), activeIndex = 2" class="type" :class="activeIndex === 2 && 'type-select'">周</div>
                <div data-time="3" @click="getCharsData(3), activeIndex = 3" class="type" :class="activeIndex === 3 && 'type-select'">月</div>
              </div>
            </div>
            <div class="right_main">
              <div class="right_main_info">
                <div class="block block-column">
                  <span class="block_title">总计结算</span>
                  <div class="block_value font-number-medium">¥{{ noticeAgentSum.totalRechargeAmount }}</div>
                </div>
                <div class="block block-column">
                  <span class="block_title">总计推广金额</span>
                  <div class="block_value font-number-medium">¥{{ noticeAgentSum.totalIssueAmount }}</div>
                </div>
                <div class="block block-column">
                  <span class="block_title">总计客户</span>
                  <div class="block_value font-number-medium">{{ noticeAgentSum.issuedByThePeople }}</div>
                </div>
              </div>
              <div class="right_main_chart" v-loading="loading" ref="chartRef"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="bottom">
        <div class="index">
          <span class="title">公告&产品动态</span>
          <div class="el-scrollbar scroll">
            <div class="el-empty init-empty">
              <div class="el-empty__image">
                <img src="../../assets/index/empty.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 700;
  color: #262626;
}
.overview {
  // width: 100%;
  position: relative;

  .main {
    float: left;
    width: 69%;
    display: flex;
    flex-direction: column;
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: calc(31% - 0.83333vw);
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .bottom {
      height: calc(45% - 16px);
      // margin-top: 16px;
    }
    .index {
      width: 100%;
      max-width: 100%;
      // height: 100%;
      padding: 2.2222vh 1.25vw;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);

      .scroll {
        width: 100%;
        padding-right: 1.25vw;
        margin-top: 1.8518518519vh;
      }
    }
  }
}
.wrapper {
  background-color: #fff;
  border-radius: 10px;

  .account-wrapper {
    padding: 2.222vh 1.25vw;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    color: #262626;
  }
}

.account-wrapper {
  background-color: #fff;
  border-radius: 10px;
  padding: 2.222vh 1.25vw;
}

.item-wrapper {
  margin-top: 2.222vh;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item {
    padding: 1.4814814815vh 1.25vw 1.4814814815vh 1.25vw;

    .label {
      font-size: 14px;
      color: #8c8c8c;
      display: flex;
      align-items: center;
    }

    .value {
      margin-top: 8px;
      font-size: 18px;
      color: #262626;
    }
  }
  .item.total {
    background: linear-gradient(130deg, #30a1ff, rgba(66, 175, 255, 0.6));
    border-radius: 10px;
    width: 12.8125vw;

    .label {
      color: #fff;
    }
    .value {
      font-size: 20px;
      color: #fff;
    }
  }

  .arrow-icon {
    width: 16px;
    height: 16px;
  }
}

.main {
  .bottom {
    margin-top: 16px;

    .index {
      width: 100%;
      max-width: 100%;
      height: 100%;
      padding: 2.2222222222vh 1.25vw 2.4074074074vh;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
  }
}

.index {
  .title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time {
      display: flex;
      border: 1px solid #dcdee1;
      border-radius: 4px;
      font-size: 0.875rem;

      .type {
        padding: 0.5555555556vh 0.8333333333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        cursor: pointer;
      }

      .type-select {
        color: #1c9fff;
      }
    }
  }

  .right_main_info {
    margin-right: 1.25vw;
    min-width: 28%;
    display: flex;
    flex-direction: column;

    .block {
      padding: 2.6851851852vh 1.25vw;
      background: rgba(245, 246, 250, 0.4);
      border-radius: 10px;

      &:not(:last-child) {
        margin-bottom: 1.4814814815vh;
      }
    }

    .block_title {
      font-size: 14px;
      color: #8c8c8c;
    }

    .block_value {
      margin-top: 0.7407407407vh;
      font-size: 18px;
      color: #262626;
    }
  }

  .right_main_chart {
    width: 100%;
  }
}

.right_main {
  width: 100%;
  margin-top: 2.037037037vh;
  display: flex;
}

.el-empty__image {
  img {
    width: 150px;
  }
}
</style>
